<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :lock-scroll="tableConfig.lockScroll"
    :append-to-body="tableConfig.appendToBody"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-form ref="formBook" :rules="rulesMemberFamily" :model="formMemberFamily" label-width="250px" >
      <el-form-item label="头像" >
        <SinglePictureUploadScreenshot ref="memberFamilyIcoImages"></SinglePictureUploadScreenshot>
      </el-form-item>


      <el-divider content-position="left">
        <el-tag size="mini" effect="plain">核心信息</el-tag>
      </el-divider>

      <el-row>
        <el-col :span="10">

          <el-form-item prop="userName" >
            <span slot="label">
              <el-tooltip content="有时会碰到一些不知道姓名的亲戚，故而姓名可以不填" placement="top" style="color: #E6A23C">
                <i class="el-icon-question"></i>
              </el-tooltip>
              <span style="color: red">姓名</span>
            </span>
            <el-input v-model.trim="formMemberFamily.userName"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">

          <el-form-item label="昵称/外号" prop="nickname" >
            <el-input v-model.trim="formMemberFamily.nickname"></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-form-item label="家庭排行" prop="familyRanking" >
        <el-input-number v-model="formMemberFamily.familyRanking" :min="1" :max="30" label="家庭排行"></el-input-number>
      </el-form-item>
      <el-form-item prop="phone" >
        <span slot="label">
          <el-tooltip content="多个手机号码可以逗号分隔" placement="top" style="color: #E6A23C">
            <i class="el-icon-question"></i>
          </el-tooltip>
          手机号码
        </span>
        <el-input v-model.trim="formMemberFamily.phone"></el-input>
      </el-form-item>
      <el-form-item label="身份证" prop="phone" >
        <el-input v-model.trim="formMemberFamily.idCard"></el-input>
      </el-form-item>


      <el-divider content-position="left">
        <el-tag size="mini" effect="plain">关系详情</el-tag>
      </el-divider>

      <el-row>
        <el-col :span="10">

          <el-form-item prop="connectionTypeId">
            <span slot="label">
              <span style="color: red">
                <span v-if="currentParent.userName === 'UNKNOWN_NAME_DEFAULT'" style="color: darkorange">未知姓名</span>
                <span v-else>{{currentParent.userName}}</span>
                <span>{{'(' + currentParent.call + ")"}}</span>
              </span>
                与当前人的关系类型
              <!--<span style="color: red">（必填）</span>-->
            </span>
            <el-select v-model="formMemberFamily.connectionTypeId" placeholder="请选择连接类型">
              <el-option
                v-for="item in connectionTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="10">

          <el-form-item prop="dataExplain" >
            <span slot="label">
               <span style="color: red">
                <span v-if="currentParent.userName === 'UNKNOWN_NAME_DEFAULT'" style="color: darkorange">未知姓名</span>
                <span v-else>{{currentParent.userName}}</span>
                <span>{{'(' + currentParent.call + ")"}}</span>
              </span>
              与当前人的关系说明
              <!--<span><span style="color: red">{{currentParent.userName + '(' + currentParent.call + ")"}}</span>与当前人的关系说明</span>-->
              <!--<span style="color: red">（必填）</span>-->
            </span>
            <el-input v-model.trim="formMemberFamily.dataExplain"></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">

          <el-form-item prop="call" >
            <span slot="label">
              <!--<span><span style="color: red">{{currentParent.currentLoginUserName}}</span>对他的称呼</span>-->
              <span style="color: red">我(当前登录人)</span>
              <span>对他的称呼</span>
              <span style="color: red">(必填)</span>
            </span>
            <el-input v-model.trim="formMemberFamily.call"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">

          <el-form-item label="父母对他的称呼" prop="callParent" >
            <el-input v-model.trim="formMemberFamily.callParent"></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">

          <el-form-item label="子女对他的称呼" prop="callSon" >
            <el-input v-model.trim="formMemberFamily.callSon"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">


        </el-col>
      </el-row>

      <el-form-item label="备注" prop="remarks" >
        <el-input v-model.trim="formMemberFamily.remarks" type="textarea"></el-input>
      </el-form-item>




      <el-divider content-position="left">
        <el-tag size="mini" effect="plain">基础信息</el-tag>
      </el-divider>


      <el-form-item >
        <span slot="label">
          <el-tooltip content="不填则从身份证上获取，输入则以输入的为准，防止实际出生年月与身份证不符的情况，该数据只参与年龄计算，与生日无关" placement="top" style="color: #E6A23C">
            <i class="el-icon-question"></i>
          </el-tooltip>
          真实出生年月类型
        </span>

        <el-radio-group v-model="formMemberFamily.lunarCalendar">
          <el-radio :label="1">阴历</el-radio>
          <el-radio :label="2">阳历</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-row>
        <el-col :span="10">

          <el-form-item label="真实出生年月" prop="birth" >
            <span slot="label">
              <el-tooltip content="记录实际的出生年月,只与年龄有关系，与其他参数无关" placement="top" style="color: #E6A23C">
                <i class="el-icon-question"></i>
              </el-tooltip>
              真实出生年月
            </span>
            <el-date-picker
              v-model="formMemberFamily.birth"
              type="date"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              placement="bottom-start"
              :picker-options="pickerOptions"
              placeholder="选择出生年月">
            </el-date-picker>
          </el-form-item>

        </el-col>
        <el-col :span="10">

        </el-col>
      </el-row>


      <el-form-item >
         <span slot="label">
          <el-tooltip content="不填或输入身份证会自动从身份证上获取，并且以身份证为主" placement="top" style="color: #E6A23C">
            <i class="el-icon-question"></i>
          </el-tooltip>
          性别
        </span>

        <el-radio-group v-model="formMemberFamily.sex">
          <el-radio :label="0">女性</el-radio>
          <el-radio :label="1">男性</el-radio>
          <el-radio :label="9">未知</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否开启生日提醒">
        <el-radio-group v-model="formMemberFamily.birthdayTips">
          <el-radio :label="1">不开启</el-radio>
          <el-radio :label="2">开启生日提醒</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-row>
        <el-col :span="20">
          <el-form-item prop="birth" >
            <span slot="label">
              <el-tooltip content="请输入阴历生日，中国主要使用阴历生日,与上面的出生年月类型无关，系统将依据该数据进行生日提醒，防止出现不知道对方具体出生年月但需要提醒的情况" placement="top" style="color: #E6A23C">
                <i class="el-icon-question"></i>
              </el-tooltip>
              生日提醒时间[阴历]
            </span>
            <el-date-picker
              v-model="formMemberFamily.birthdayTime"
              type="date"
              placement="bottom-start"
              placeholder="选择日期"
              format="MM-dd"
              value-format="MM-dd"
              :editable="false"
            ></el-date-picker>
            <span>当前阴历：{{ timeHome.yearLunar }}-{{ timeHome.monthLunar }}-{{ timeHome.dayLunar }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>

          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item prop="birth" >
       <span slot="label">
          <el-tooltip content="生日开始之前多久提醒，比如输入0当天才提醒，30则提前30天提醒" placement="top" style="color: #E6A23C">
            <i class="el-icon-question"></i>
          </el-tooltip>
          生日多久之前提醒
        </span>
       <el-input-number v-model="formMemberFamily.beforeBirthday" :min="0" :max="30" label="生日多久之前提醒"></el-input-number>
      </el-form-item>




      <el-divider content-position="left">
        <el-tag size="mini" effect="plain">其他信息</el-tag>
      </el-divider>



      <el-form-item label="外貌特征" prop="features" >
        <el-input v-model.trim="formMemberFamily.features" type="textarea"></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="10">

          <el-form-item label="公司名称" prop="companyName" >
            <el-input v-model.trim="formMemberFamily.companyName"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">

          <el-form-item label="公司地址" prop="companyAddress" >
            <el-input v-model.trim="formMemberFamily.companyAddress"></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">

          <el-form-item label="职业" prop="occupation" >
            <el-input v-model.trim="formMemberFamily.occupation"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">

          <el-form-item label="工作行业" prop="trade" >
            <el-input v-model.trim="formMemberFamily.trade"></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">

          <el-form-item label="最高学历毕业学校" prop="graduationSchool" >
            <el-input v-model.trim="formMemberFamily.graduationSchool"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">

          <el-form-item label="学历" prop="education" >
            <el-input v-model.trim="formMemberFamily.education"></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">

          <el-form-item label="车牌" prop="licensePlate" >
            <el-input v-model.trim="formMemberFamily.licensePlate"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">

          <el-form-item label="结婚时间" prop="marryTime" >
            <el-input v-model.trim="formMemberFamily.marryTime"></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-form-item label="健康情况" prop="health" >
        <el-input v-model.trim="formMemberFamily.health" type="textarea"></el-input>
      </el-form-item>

      <el-form-item label="排序" prop="sort" >
        <el-slider
          :marks="marks" :min="0" :max="100" :step="0.1"
          v-model="formMemberFamily.sort" show-input>
        </el-slider>
      </el-form-item>




      <el-divider content-position="left">
        <el-tag size="mini" effect="plain">地图</el-tag>
      </el-divider>

      <el-row>
        <el-col :span="10">
          <el-form-item label="离世时间" prop="deathTime" >
            <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" placement="bottom-start" type="date" placeholder="选择日期" v-model="formMemberFamily.deathTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          &nbsp;<el-button type="success" plain @click="selectMausoleumAddress">选择陵墓地址</el-button>
        </el-col>
      </el-row>

      <el-form-item label="陵墓说明" prop="tombExplanation" >
        <el-input v-model.trim="formMemberFamily.tombExplanation" type="textarea" placeholder="包括墓碑信息，详细说明等"></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="10">
          <el-form-item label="陵墓经度" prop="tombLongitude" >
            <el-input :disabled="true" v-model.trim="formMemberFamily.tombLongitude" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="陵墓纬度" prop="tombLatitude" >
            <el-input :disabled="true" v-model.trim="formMemberFamily.tombLatitude" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="陵墓经纬度对应地址" prop="tombLongitudeLatitudeText" >
        <el-input :disabled="true" v-model.trim="formMemberFamily.tombLongitudeLatitudeText" ></el-input>
      </el-form-item>

      <el-form-item label="陵墓图片" >
        <SinglePictureUploadScreenshot :paste="false" ref="tombIcoImagesRef"></SinglePictureUploadScreenshot>
      </el-form-item>



      <el-form-item label="居住地址" prop="residentialAddress" >
        <el-input v-model.trim="formMemberFamily.residentialAddress" type="textarea"></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="14">
          <el-form-item label="老家地址" prop="residentialAddressHometown" >
            <el-input v-model.trim="formMemberFamily.residentialAddressHometown" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          &nbsp;<el-button type="success" plain @click="selectHomeAddress">选择老家地址</el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="老家经度" prop="hometownLongitude" >
            <el-input :disabled="true" v-model.trim="formMemberFamily.hometownLongitude" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="老家纬度" prop="hometownLatitude" >
            <el-input :disabled="true" v-model.trim="formMemberFamily.hometownLatitude" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="老家经纬度对应地址" prop="hometownLongitudeLatitudeText" >
        <el-input :disabled="true" v-model.trim="formMemberFamily.hometownLongitudeLatitudeText" ></el-input>
      </el-form-item>

      <el-form-item label="老家图片" >
        <SinglePictureUploadScreenshot :paste="false" ref="hometownIcoImagesRef"></SinglePictureUploadScreenshot>
      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="toSaveUpd" v-if="defaultValue.saveUpdSelect !== 'select'">{{defaultValue.title}}</el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

    <GaoDeMapSelectCoordinates ref="gaoDeMapSelectCoordinatesRef" @callbackTomb="callbackTomb" @callbackHometown="callbackHometown"></GaoDeMapSelectCoordinates>

  </el-dialog>

</template>

<script>

  import http from '@/utils/http'
  import {clearInvalid} from "../../utils/utils"
  import SinglePictureUploadScreenshot from '@/components/common/SinglePictureUploadScreenshot.vue';
  import GaoDeMapSelectCoordinates from '@/components/common/GaoDeMapSelectCoordinates.vue'

  export default {
    name: "MemberFamilySaveUpd",
    components: {
      SinglePictureUploadScreenshot,
      GaoDeMapSelectCoordinates,
    },
    data(){
      return {
        // 日期带快捷选项
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        // 排序的默认值
        marks: {
          10: '靠前',
          70: '靠后',
        },
        // 要展示的时间数据
        timeHome: {
          date: null,
          yearLunar: null,
          monthLunar: null,
          dayLunar: null,
          lunarStr: null,
          year: null,
          chineseZodiac: null,
          week: null,
          jieQi: null,
          festivalList: null,
        },
        // 人员关系，连接类型
        connectionTypeList: [],
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
          // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
          lockScroll: false,
          appendToBody: true,
        },
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '查看',
          // 保存还是修改or查看,取值有 select | save | upd
          saveUpdSelect: 'select'
        },
        // 要提交的数据
        formMemberFamily: {
          id: null,
          userName: null,
          nickname: null,
          familyRanking: null,
          features: null,
          phone: null,
          idCard: null,
          sex: null,
          lunarCalendar: null,
          birth: null,
          birthdayTime: null,
          beforeBirthday: null,
          birthdayTips: null,
          icoPath: null,
          occupation: null,
          companyName: null,
          companyAddress: null,
          trade: null,
          graduationSchool: null,
          education: null,
          residentialAddress: null,
          residentialAddressHometown: null,
          marryTime: null,
          deathTime: null,
          tombId: null,
          licensePlate: null,
          remarks: null,
          health: null,
          sort: 99,
          // 关系部分
          joinId: null,
          connectionTypeId: null,
          dataExplain: null,
          callParent: null,
          call: null,
          callSon: null,
          sourceId: null,
          // 新增地图部分
          tombExplanation: null,
          tombLongitude: null,
          tombLatitude: null,
          tombLongitudeLatitudeText: null,
          hometownLongitude: null,
          hometownLatitude: null,
          hometownLongitudeLatitudeText: null,
        },
        // 校验规则
        rulesMemberFamily: {
          call: [{ required: true, message: '请输入我对他的称呼', trigger: 'blur' }],
          dataExplain: [{ required: true, message: '请输入关系说明', trigger: 'blur' }],
          connectionTypeId: [{ required: true, message: '请选择关系类型', trigger: 'change' }],
        },
        // 当前父级数据，用于和现在要添加的子级做一些展示
        currentParent: {
          // 当前用户ID
          id: null,
          // 真实姓名
          userName: '',
          // 外号，昵称
          nickname: null,
          // 我对他的称呼
          call: '',
          // 当前登陆用户
          currentLoginUserName: null,
          // 获取连接类型的使用哪一种，现在有三种，1，只获取家庭成员2，获取社交关系，3，1+2全部获取
          connectionType: 1,
        },
      }
    },
    watch: {
      // 监听到输入姓名则去后台查询是否已经存在过，存在则加入快速跳过去页面的代码
      'formMemberFamily.userName'() {
        this.getUserByUserName()
      },
      // 监听到输入身份证则去后台查询是否已经存在过，存在则加入快速跳过去页面的代码
      'formMemberFamily.idCard'() {
        this.getUserByIdCard()
      },
    },
    methods: {
      /**
       * 查询首页的日历信息
       */
      getCalendar(){
        http.get("/home/getCalendar", {
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.timeHome = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 根据身份证查询用户信息
       */
      getUserByIdCard(){
        // 某些参数不去触发操作
        let idCard = this.formMemberFamily.idCard
        if (idCard == null || idCard === '' || idCard === 'undefined' || idCard === 'null'){
          return
        }

        http.post("/user/getUserByIdCard", {
          idCard: idCard,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          let obj = res.data
          if (obj){
            let localStorage = window.localStorage;
            let memberFamily = JSON.parse(localStorage.memberFamily);
            if (memberFamily.id === obj.id){
              // 自身用户，不做操作
              return;
            }
            // 修改的时候防止自触发
            if (obj.id === this.formMemberFamily.id){
              return;
            }
            this.$confirm('当前身份证已存在，是否跳转到该用户?', '提示', {
              confirmButtonText: '跳转到用户',
              cancelButtonText: '继续当前页面',
              type: 'warning'
            }).then(() => {
              // 跳转到人员信息页面
              this.$router.push({
                name:"toSocialConnectionList",
                // 除了这种方式传参，还可以 params 方式传参，参考：https://blog.csdn.net/sinat_52319736/article/details/127464798
                query: {
                  userId: obj.id,
                }
              })
              // 这会导致页面白一下，但是没办法，上面的跳转并不会真的跳
              this.$router.go(0)

            }).catch(() => {
              // 继续当前页面
            });
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 根据用户名查询用户信息
       */
      getUserByUserName(){
        // 某些参数不去触发操作
        let userName = this.formMemberFamily.userName
        if (userName == null || userName === '' || userName === 'undefined' || userName === 'null' || userName === 'UNKNOWN_NAME_DEFAULT'){
          return
        }

        http.post("/user/getUserByUserName", {
          userName: userName,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          let obj = res.data
          if (obj){
            let localStorage = window.localStorage;
            let memberFamily = JSON.parse(localStorage.memberFamily);
            if (memberFamily.id === obj.id){
              // 自身用户，不做操作
              return;
            }
            // 修改的时候防止自触发
            if (obj.id === this.formMemberFamily.id){
              return;
            }
            this.$confirm('当前用户名已存在，是否跳转到该用户?', '提示', {
              confirmButtonText: '跳转到用户',
              cancelButtonText: '继续当前页面',
              type: 'warning'
            }).then(() => {
              // 跳转到人员信息页面
              this.$router.push({
                name:"toSocialConnectionList",
                // 除了这种方式传参，还可以 params 方式传参，参考：https://blog.csdn.net/sinat_52319736/article/details/127464798
                query: {
                  userId: obj.id,
                }
              })
              // 这会导致页面白一下，但是没办法，上面的跳转并不会真的跳
              this.$router.go(0)

            }).catch(() => {
              // 继续当前页面
            });
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 老家选择后的回调
       * @param obj 老家信息
       */
      callbackHometown(obj){
        if (obj){
          this.formMemberFamily.hometownLongitude = obj.lng
          this.formMemberFamily.hometownLatitude = obj.lat
          this.formMemberFamily.hometownLongitudeLatitudeText = obj.actualAddress
        }
      },
      /**
       * 选择老家地址
       */
      selectHomeAddress(){
        // 要传入回调地址
        this.$refs.gaoDeMapSelectCoordinatesRef.openGaoDePage(this.formMemberFamily.hometownLongitude, this.formMemberFamily.hometownLatitude, "callbackHometown")
      },
      /**
       * 选择陵墓地址
       */
      selectMausoleumAddress(){
        // 要传入回调地址
        this.$refs.gaoDeMapSelectCoordinatesRef.openGaoDePage(this.formMemberFamily.tombLongitude, this.formMemberFamily.tombLatitude, "callbackTomb")
      },
      /**
       * 陵墓信息回调
       * @param obj 陵墓信息
       */
      callbackTomb(obj){
        if (obj){
          this.formMemberFamily.tombLongitude = obj.lng
          this.formMemberFamily.tombLatitude = obj.lat
          this.formMemberFamily.tombLongitudeLatitudeText = obj.actualAddress
        }
      },
      /**
       * 是保存还是修改家庭成员
       */
      toSaveUpd(){
        if (this.defaultValue.saveUpdSelect === 'save'){
          this.savMemberFamily()

        } else if (this.defaultValue.saveUpdSelect === 'upd'){
          this.updMemberFamily()

        } else {

        }
      },

      /**
       * 更新家庭成员信息
       */
      updMemberFamily(){
        let formData = new FormData()
        clearInvalid(this.formMemberFamily)
        this.appendPram(formData)
        // 处理头像图片
        let uploadList = this.$refs.memberFamilyIcoImages.upload.fileList
        uploadList.forEach((file) => {
          // 更新的时候，如果没有图片不做处理，这个时候的图片是自己放进去的，但没有 file.raw 数据
          if (file.raw){
            formData.append('file', file.raw)
          }
        });
        // 处理陵墓图片
        let tombUploadList = this.$refs.tombIcoImagesRef.upload.fileList
        tombUploadList.forEach((file) => {
          // 更新的时候，如果没有图片不做处理，这个时候的图片是自己放进去的，但没有 file.raw 数据
          if (file.raw){
            formData.append('tombFile', file.raw)
          }
        });
        // 处理老家图片
        let hometownUploadList = this.$refs.hometownIcoImagesRef.upload.fileList
        hometownUploadList.forEach((file) => {
          // 更新的时候，如果没有图片不做处理，这个时候的图片是自己放进去的，但没有 file.raw 数据
          if (file.raw){
            formData.append('hometownFile', file.raw)
          }
        });

        http.postFileForm("/user/updMemberFamily", formData).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("更新成功");
          this.$emit('saveUpdMemberFamilyCallback', null)
          // 关闭弹出框
          this.initMemberFamily()
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 保存家庭成员
       */
      savMemberFamily(){
        let formData = new FormData()
        this.appendPram(formData)
        // 处理头像图片
        let uploadList = this.$refs.memberFamilyIcoImages.upload.fileList
        uploadList.forEach((file) => {
          // 更新的时候，如果没有图片不做处理，这个时候的图片是自己放进去的，但没有 file.raw 数据
          if (file.raw){
            formData.append('file', file.raw)
          }
        });
        // 处理陵墓图片
        let tombUploadList = this.$refs.tombIcoImagesRef.upload.fileList
        tombUploadList.forEach((file) => {
          // 更新的时候，如果没有图片不做处理，这个时候的图片是自己放进去的，但没有 file.raw 数据
          if (file.raw){
            formData.append('tombFile', file.raw)
          }
        });
        // 处理老家图片
        let hometownUploadList = this.$refs.hometownIcoImagesRef.upload.fileList
        hometownUploadList.forEach((file) => {
          // 更新的时候，如果没有图片不做处理，这个时候的图片是自己放进去的，但没有 file.raw 数据
          if (file.raw){
            formData.append('hometownFile', file.raw)
          }
        });

        http.postFileForm("/user/saveMemberFamily", formData).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("保存成功");
          this.$emit('saveUpdMemberFamilyCallback', null)
          // 关闭弹出框
          this.initMemberFamily()
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 拼接参数
       * @formData 提交的数据
       */
      appendPram(formData){
        for (let key in this.formMemberFamily){
          if (this.formMemberFamily[key]){
            formData.append(key, this.formMemberFamily[key])
          }
        }
      },
      /**
       * 初始化弹出框的数据
       */
      initMemberFamily(){
        this.formMemberFamily = {
          id: null,
          userName: null,
          nickname: null,
          familyRanking: null,
          features: null,
          phone: null,
          idCard: null,
          sex: null,
          lunarCalendar: null,
          birth: null,
          birthType: null,
          beforeBirthday: null,
          birthdayTips: null,
          icoPath: null,
          occupation: null,
          companyName: null,
          companyAddress: null,
          trade: null,
          graduationSchool: null,
          education: null,
          residentialAddress: null,
          residentialAddressHometown: null,
          marryTime: null,
          deathTime: null,
          tombId: null,
          licensePlate: null,
          remarks: null,
          health: null,
          sort: 99,

          joinId: null,
          connectionTypeId: null,
          dataExplain: null,
          callParent: null,
          call: null,
          callSon: null,
          sourceId: null,
          // 新增地图部分
          tombExplanation: null,
          tombLongitude: null,
          tombLatitude: null,
          tombLongitudeLatitudeText: null,
          hometownLongitude: null,
          hometownLatitude: null,
          hometownLongitudeLatitudeText: null,
        }
        this.currentParent = {
          id: null,
          // 真实姓名
          userName: '',
          // 外号，昵称
          nickname: null,
          // 我对他的称呼
          call: '',
          // 当前登陆用户
          currentLoginUserName: null,
          // 获取连接类型的使用哪一种，现在有三种，1，只获取家庭成员2，获取社交关系，3，1+2全部获取
          connectionType: 1,
        }
      },
      /**
       * 获取家庭成员类型选项
       */
      getSocialConnectionType(){
        http.post("/user/getSocialConnectionType", {
          // 1，只获取家庭成员2，获取社交关系，3，1+2全部获取
          type: this.currentParent.connectionType
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.connectionTypeList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开弹出框之前
       * @param value 保存还是修改or查看,取值有 select \ save \ upd
       * @param obj 如果是修改和查看，则是详细数据,需要赋值
       * @param currentParent 用户数据以及一些策略
       */
      openMemberFamilyPage(value, obj, currentParent){
        this.getCalendar()
        // 从父组件传入，减少查询
        this.defaultValue.saveUpdSelect = value
        this.initMemberFamily()
        // 赋予策略
        this.currentParent = currentParent
        // 根据策略获取连接类型
        this.getSocialConnectionType()

        if (value === 'save'){
          // 添加关系
          this.formMemberFamily.sourceId = this.currentParent.id
          this.defaultValue.title = '新增'

        } else if (value === 'upd'){
          this.defaultValue.title = '修改'
          this.formMemberFamily = JSON.parse(JSON.stringify(obj))
          let name = this.formMemberFamily.userName
          if (name === 'UNKNOWN_NAME_DEFAULT'){
            this.formMemberFamily.userName = null
          }

          // 页面加载完成后执行，否则无法获取到dom
          this.$nextTick(() => {
            // 头像
            // if（aa!=null&&aa!=""）
            if (this.formMemberFamily.icoPath){
              // 对图片进行处理，回显
              let poster = {name: this.formMemberFamily.id + this.formMemberFamily.icoPath, url: this.formMemberFamily.icoPath, uid: this.formMemberFamily.id + this.formMemberFamily.icoPath}
              // 先清空，否则可能数据污染
              this.$refs.memberFamilyIcoImages.upload.fileList = []
              this.$refs.memberFamilyIcoImages.upload.fileList.push(poster)
              this.$refs.memberFamilyIcoImages.uploadHide()
            }
            // 陵墓
            if (this.formMemberFamily.tombIcoPath){
              // 对图片进行处理，回显
              let poster = {name: this.formMemberFamily.id + this.formMemberFamily.tombIcoPath, url: this.formMemberFamily.tombIcoPath, uid: this.formMemberFamily.id + this.formMemberFamily.tombIcoPath}
              // 先清空，否则可能数据污染
              this.$refs.tombIcoImagesRef.upload.fileList = []
              this.$refs.tombIcoImagesRef.upload.fileList.push(poster)
              this.$refs.tombIcoImagesRef.uploadHide()
            }
            // 老家
            if (this.formMemberFamily.hometownIcoPath){
              // 对图片进行处理，回显
              let poster = {name: this.formMemberFamily.id + this.formMemberFamily.hometownIcoPath, url: this.formMemberFamily.icoPath, uid: this.formMemberFamily.id + this.formMemberFamily.hometownIcoPath}
              // 先清空，否则可能数据污染
              this.$refs.hometownIcoImagesRef.upload.fileList = []
              this.$refs.hometownIcoImagesRef.upload.fileList.push(poster)
              this.$refs.hometownIcoImagesRef.uploadHide()
            }
          })

        } else {
          this.defaultValue.title = '详情'
          this.formMemberFamily = obj
        }

        this.tableConfig.show = true
        // this.$store.commit('navigationListChange', ['家庭管理', '家庭成员', this.defaultValue.title])
      },
    },
    mounted(){

    },
  }
</script>

<style scoped>


</style>

<style>

  /*关闭图片回显的特效，否则会是从上慢慢掉进入到添加框中*/
  .el-upload-list__item {
    transition: none !important;
  }
</style>
